<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>登录商城</title>
	<link rel="stylesheet" href="./css/base.css" type="text/css">
	<link rel="stylesheet" href="./css/global.css" type="text/css">
	<link rel="stylesheet" href="./css/header.css" type="text/css">
	<link rel="stylesheet" href="./css/login.css" type="text/css">
	<link rel="stylesheet" href="./css/footer.css" type="text/css">
</head>
<body>
	<!-- 顶部导航 start -->
	<div class="topnav">
		<div class="topnav_bd w990 bc">
			<div class="topnav_left">
				
			</div>
			<div class="topnav_right fr">
				<ul>
					<li>您好，欢迎来到京西！[<a href="login.html">登录</a>] [<a href="regist.html">免费注册</a>] </li>
					<li class="line">|</li>
					<li>我的订单</li>
					<li class="line">|</li>
					<li>客户服务</li>

				</ul>
			</div>
		</div>
	</div>
	<!-- 顶部导航 end -->
	<div style="clear:both;"></div>

	<!-- 页面头部 start -->
	<div class="header w990 bc mt15">
		<div class="logo w990">
			<h2 class="fl"><a href="index.html"><img src="./imgs/logo.png" alt="京西商城"></a></h2>
		</div>
	</div>
	<!-- 页面头部 end -->
	
	<!-- 登录主体部分start -->
	<div class="login w990 bc mt10">
		<div class="login_hd">
			<h2>用户登录</h2>
			<b></b>
		</div>
		<div class="login_bd">
			<div class="login_form fl">
				<form action="" method="post">
					<ul>
						<li>
							<label for="">用户名：</label>
							<input type="text" class="txt" name="username" />
						</li>
						<li>
							<label for="">密码：</label>
							<input type="password" class="txt" name="password" />
							<a href="">忘记密码?</a>
						</li>
						<li class="checkcode">
							<label for="">验证码：</label>
							<input type="text"  name="checkcode" />
							<img src="http://kg.zhaodashen.cn/v1/public/captcha.jsp" alt="" />
							<span>看不清？<a href="">换一张</a></span>
						</li>
						<li>
							<label for="">&nbsp;</label>
							<input type="checkbox" class="chb remember" value="1" onclick="this.value==1?this.value=2:this.value=1" /> 保存登录信息
						</li>
						<li>
							<label for="">&nbsp;</label>
							<input type="submit" value="" class="login_btn" />
						</li>
					</ul>
				</form>

				<div class="coagent mt15">
					<dl>
						<dt>使用合作网站登录商城：</dt>
						<dd class="qq"><a href=""><span></span>QQ</a></dd>
						<dd class="weibo"><a href=""><span></span>新浪微博</a></dd>
						<dd class="yi"><a href=""><span></span>网易</a></dd>
						<dd class="renren"><a href=""><span></span>人人</a></dd>
						<dd class="qihu"><a href=""><span></span>奇虎360</a></dd>
						<dd class=""><a href=""><span></span>百度</a></dd>
						<dd class="douban"><a href=""><span></span>豆瓣</a></dd>
					</dl>
				</div>
			</div>
			
			<div class="guide fl">
				<h3>还不是商城用户</h3>
				<p>现在免费注册成为商城用户，便能立刻享受便宜又放心的购物乐趣，心动不如行动，赶紧加入吧!</p>

				<a href="regist.html" class="reg_btn">免费注册 >></a>
				<!-- <a style="display: inline-block;margin-left: 0px;" href="regist.html" class="reg_btn">免费注册 >></a> -->
				<br>
				<a href="./regist2.html" class="reg_btn">快速注册 >></a>
				<!-- <a style="display: inline-block;margin-left: 0px;" href="./regist2.html" class="reg_btn">快速注册 >></a> -->
			</div>

		</div>
	</div>
	<!-- 登录主体部分end -->

	<div style="clear:both;"></div>
	<!-- 底部版权 start -->
	<div class="footer w1210 bc mt15">
		<p class="links">
			<a href="">关于我们</a> |
			<a href="">联系我们</a> |
			<a href="">人才招聘</a> |
			<a href="">商家入驻</a> |
			<a href="">千寻网</a> |
			<a href="">奢侈品网</a> |
			<a href="">广告服务</a> |
			<a href="">移动终端</a> |
			<a href="">友情链接</a> |
			<a href="">销售联盟</a> |
			<a href="">京西论坛</a>
		</p>
		<p class="copyright">
			 © 2005-2013 京东网上商城 版权所有，并保留所有权利。  ICP备案证书号:京ICP证070359号 
		</p>
		<p class="auth">
			<a href=""><img src="./imgs/xin.png" alt="" /></a>
			<a href=""><img src="./imgs/kexin.jpg" alt="" /></a>
			<a href=""><img src="./imgs/police.jpg" alt="" /></a>
			<a href=""><img src="./imgs/beian.gif" alt="" /></a>
		</p>
	</div>
	<!-- 底部版权 end -->
	<script src="./js/jquery-1.8.3.min.js"></script>
<script>
	// 登录
	// 1.绑定事件阻止表单提交
	//   方法1：给【提交按钮】绑定【点击事件】，阻止浏览器默认动作 表单提交动作
	//   方法2：给【form标签】绑定【提交事件submit】，阻止浏览器默认动作 表单提交动作
	// 2.事件处理函数中
		// 2.1获取用户输入的数据        实战还得正则验证
		// 2.2请求接口
		// 2.3  失败---弹窗提示信息   成功：1-提示  2-存取  3-跳转
		// 存的目的：1-用户名-后期在网页的头部显示，判断用户是否登陆
		// 		    2- 用户编号--会员中心我的订单、我的收藏  
		//          但是用户编号并不安全，容易被篡改   因此加密，改成token

	$('.login_btn').click(function(e){
		// 阻止默认提交
		e.preventDefault()
		// 2.1获取用户输入的数据        实战还得正则验证
		let uname=$('input[name="username"]').val()
		let pwd=$('input[name="password"]').val()
		let captcha=$('input[name="checkcode"]').val()
		// 2.2请求接口
		$.post('http://kg.zhaodashen.cn/v1/public/login.jsp',{uname,pwd,captcha},res=>{
			// console.log(res);
			if(res.meta.state==200)
			{
				alert('登录成功，跳转中')
				// 留心：检查是否勾选
				let status=$('.remember').val()
				if(status==1)
				{
					sessionStorage.setItem('uname',res.data.uname)
					sessionStorage.setItem('token',res.data.token)
				}else{
					localStorage.setItem('uname',res.data.uname)
				    localStorage.setItem('token',res.data.token)
				    localStorage.setItem('login_expires',(new Date).getTime()+1000*60*60*24*7)
				}


				// localStorage.setItem('uname',res.data.uname)
				// localStorage.setItem('token',res.data.token)
				// localStorage.setItem('login_expires',(new Date).getTime()+1000*60*60*24*7)

				location.href='./index.html'
			}else{
				alert(res.meta.msg)
			}

		},'json')
	})
</script>
</body>
</html>